<template>
	<view class="successFulPay">
		<view class="successFulPayCon">
			<view class="successFulPayConH">
				<icon class="icon-small" type="success" color="#07c160" size="30"></icon>
				<text>支付成功</text>
			</view>
			<view class="successFulPayConF">
				<text>北京第一人民医院</text>
				<text>
					￥
					<text>{{ Data.money }}.00</text>
				</text>
			</view>
		</view>
		<view class="successFulPayBtn"><button @click="ok">完成</button></view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		reactive
	} from 'vue'
	import {
		useTopStore
	} from '@/store/TopUpService.js';
	const topStore = useTopStore();
	const Data = reactive({
		money: 0,
		id: 0
	})
	let ok = () => {
		let url = '';
		if (topStore.topType == 'online') {
			url = `/pages/selfPayment/rechargeRecord/rechargeRecord?id=${Data.id}`
		} else if (topStore.topType == 'hospital') {
			url = `/pages/hospitalRecharge/hospitalRechargeRec/hospitalRechargeRec?id=${Data.id}`
		}
		uni.navigateTo({
			url
		})
	}
	onLoad(option => {
		Data.money = parseFloat(option.money);
		option.id && (Data.id = parseFloat(option.id));
	})
</script>

<style lang="less" scoped>
	.successFulPay {
		width: 750rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding: 100rpx 0;
		box-sizing: border-box;
		background-color: #fdfeff;

		.successFulPayCon {
			width: 100%;
			height: 370rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;

			.successFulPayConH,
			.successFulPayConF {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

			.successFulPayConH {
				color: #07c160;
				font-size: 30rpx;
				font-weight: 600;

				text {
					margin: 20rpx 0;
				}
			}

			.successFulPayConF {
				font-size: 30rpx;

				text:nth-child(2) {
					font-size: 40rpx;
					font-weight: 600;
					margin-top: 20rpx;

					text {
						font-size: 55rpx;
					}
				}
			}
		}

		.successFulPayBtn {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			button {
				width: 350rpx;
				height: 80rpx;
				border-radius: 10rpx;
				background-color: #f2f2f2;
				color: #07c160;
				display: flex;
				justify-content: center;
				align-items: center;
				border: none;
				font-weight: 600;
			}
		}
	}
</style>
